<html>
	<title>cfl-elasticsearch</title>
<head>
</head>
<body>
	<div>
		<buttom id="addButton">插入数据</buttom>
	</div>
	<br/>
	<div>	
		<input id="name" placeholder="请输入搜索名称" />
		&nbsp;&nbsp;
		性别:
		<select name="sex">
			<option value="">全部</option>
			<option value="0">男</option>
			<option value="1">女</option>
		</select>
		&nbsp;&nbsp;
		<input type="number" style="width:80px;" name="minAge" placeholder="最小年龄" />
		至
		<input type="number" style="width:80px;" name="maxAge" placeholder="最大年龄" />
		<buttom id="searchButton">搜索</buttom>
	</div>
	<br/>
	<div id="content">
	</div>
</body>
<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
<script>
	$(document).ready(function() {
		// 插入
		$("#addButton").click(function() {
			$.get("add", null, function(data){
				alert(JSON.stringify(data));
		   		if(data.code == '0000')
		   		{
		   			alert('插入成功');
		   		}
		   		else
		   		{
		   			alert(data.msg);
		   		}
		   	});
		});
		// 查询
		$("#searchButton").click(function() {
			var map = new Map();
			map["name"] = $("#name").val();
			map["sex"] = $("select[name='sex']").val();
			map["minAge"] = $("input[name='minAge']").val();
			map["maxAge"] = $("input[name='maxAge']").val();
			$.get("search", map, function(data){
		   		$("#content").empty();
		   		if(data.code == '0000')
		   		{
		   			var objects = data.objects;
		   			for(var i = 0; i < objects.length; i++)
		   			{
		   				var obj = objects[i];
		   				var sex = '男';
		   				if(obj.sex == '1')
		   				{
		   					sex = '女';
		   				}
		   				$("#content").append("<div> <span class='content'>姓名："+obj.name+"</span> &nbsp; &nbsp; <span class='content'>内容："+obj.content+"</span> &nbsp; &nbsp; <span class='content'>性别："+sex+"</span> &nbsp; &nbsp; <span class='content'>年龄："+obj.age+"</span> <div>");
		   			}
		   		}
		   		else
		   		{
		   			alert(data.msg);
		   		}
		   	});
		});
	})
</script>
<style>
	.content {
	    display:  block;
	    width: 300px;
	    float:  left;
	}
</style>
</html>